<template>
    <LeftLayout v-if="currentLayout.layoutPlan === 'LEFT_NAVIGATION'" />
    <TopLayout v-if="currentLayout.layoutPlan === 'TOP_NAVIGATION'" />
    <DpaLayout v-if="currentLayout.layoutPlan === 'DPA_NAVIGATION'" />
    <DpaDetail v-if="currentLayout.layoutPlan === 'DPA_NAVIGATION_OTHER'" />
</template>

<script setup lang="ts">
    import { computed, ref, watch, inject } from 'vue'
    import LeftLayout from '@/layouts/LeftLayout.vue'
    import TopLayout from '@/layouts/TopLayout.vue'
    import DpaLayout from '@/layouts/components/AlLayoutDpa/index.vue'
    import DpaDetail from '@/layouts/components/AlLayoutDpaDetail/index.vue'
    import LayoutConfig from '@/layouts/layoutConfig.json'
    import useAlLayoutStyleEffect from './hooks/alLayoutStyleEffet'

    import { useRoute } from 'vue-router'
    import advancedMenuConfiguration from '@/layouts/advancedMenuConfiguration.json'
    import { useLayoutStore } from '@/store/modules/layout'
    import { find, cloneDeep } from 'lodash-es'
    import { LAYOUT_PLAN_KEY } from '@/constant'

    const getLayoutMap = () => {
      if (!advancedMenuConfiguration.enable) {
        return null
      }
      const _layoutMap = []
      const recursiveLayoutMenu = (menuList, layoutPlanId, layoutPlan) => {
        menuList.forEach(item => {
          let menuUrl = item.menuUrl
          // 处理url中没有:的问题
          if (menuUrl.match(/https:\/\/.*$/)) {
            menuUrl = menuUrl.replace(/https:\/\//g, 'https//')
          } else if (menuUrl.match(/http:\/\/.*$/)) {
            menuUrl = menuUrl.replace(/http:\/\//g, 'http//')
          }

          menuUrl = menuUrl ? menuUrl + LAYOUT_PLAN_KEY + layoutPlanId : menuUrl

          _layoutMap.push({
            menuId: item.menuId,
            url: menuUrl,
            layoutPlanId,
            layoutPlan
          })
          if (item.children && item.children.length > 0) {
            recursiveLayoutMenu(item.children, layoutPlanId, layoutPlan)
          }
        })
      }
      advancedMenuConfiguration.layoutConfiguration.forEach(layoutItem => {
        const { id, layoutPlan, menuConfigurationList, dpaMenuConfiguration } = layoutItem
        if (layoutItem.layoutPlan !== 'DPA_NAVIGATION') {
          recursiveLayoutMenu(menuConfigurationList, id, layoutPlan)
        } else {
          recursiveLayoutMenu(dpaMenuConfiguration.leftMenuList, id, layoutPlan)
          recursiveLayoutMenu(dpaMenuConfiguration.rightMenuList, id, 'DPA_NAVIGATION_OTHER')
          recursiveLayoutMenu(dpaMenuConfiguration.bottomMenuList, id, 'DPA_NAVIGATION_OTHER')
        }
      })

      return _layoutMap
    }

    const layoutStore = useLayoutStore()
    let layoutMap = layoutStore.getLayoutMap

    if (!layoutMap) {
      layoutMap = getLayoutMap()
      layoutStore.updateLayoutMap(layoutMap)
    }

    const route = useRoute()
    const currentLayout = ref({
      layoutPlan: 'LEFT_NAVIGATION'
    })

    watch(
        () => route,
        newVal => {
          // 根据当前路由获取布局id
          const {
            meta: { layoutPlanId: metaLayoutPlanId },
            fullPath,
            query
          } = newVal || { meta: {}, fullPath: '' }
          // 如果路由中携带了layoutPlanId参数，以路由中的参数为准
          const layoutPlanId = query && query.layoutPlanId ? query.layoutPlanId : metaLayoutPlanId
          // 如果有布局，获取布局方式
          if (layoutPlanId) {
            if (layoutPlanId === 'DPA_NAVIGATION_OTHER') {
              currentLayout.value.layoutPlan = 'DPA_NAVIGATION_OTHER'
              return
            }
            const { layoutConfiguration } = cloneDeep(advancedMenuConfiguration)
            const _currentLayout = find(layoutConfiguration, { id: layoutPlanId })
            if (_currentLayout) {
              currentLayout.value = _currentLayout
            } else {
              currentLayout.value = advancedMenuConfiguration.layoutConfiguration[0]
            }
          } else if (advancedMenuConfiguration.enable) {
            const _currentLayout = find(layoutMap, { url: fullPath })
            if (_currentLayout) {
              currentLayout.value = _currentLayout
            } else {
              currentLayout.value = advancedMenuConfiguration.layoutConfiguration[0]
            }
          } else {
            currentLayout.value = LayoutConfig
          }
        },
        {
          immediate: true,
          deep: true
        }
    )

    const menuTheme = computed(() => {
        return LayoutConfig.themeSettings
    })
    // 获取全局参数
    const configProvider = inject('configProvider')
    const { handleAddCousomsStyle, handleRemoveCousomsStyle } = useAlLayoutStyleEffect(handleGetStyle)
    // ---------------------------------------------------- 监听
    watch(
        () => [menuTheme.value, route],
        () => {
            if (menuTheme.value === 'CUSTOM') {
                return handleAddCousomsStyle()
            }
            handleRemoveCousomsStyle()
        },
        {
            deep: true,
            immediate: true
        }
    )
    // ---------------------------------------------------- 方法
    //  获取自定样式
    function handleGetStyle() {
        if (!LayoutConfig.topMenuArea || LayoutConfig.layoutPlan === 'DPA_NAVIGATION') {
            return
        }
        const layouts = {
            LEFT_NAVIGATION: handleSetVerticalStyles,
            TOP_NAVIGATION: handleSetHorizontalStyles
        }
        return layouts[LayoutConfig.layoutPlan](configProvider && configProvider.prefixCls)
    }
    // 左侧导航自定义样式
    function handleSetVerticalStyles(prefixCls) {
        const { leftMenuArea: left, topMenuArea: top } = LayoutConfig
        return `
            .al-layout-theme-custom .${prefixCls}-layout-sider,
            .al-layout-theme-custom .${prefixCls}-layout-sider .${prefixCls}-layout-sider-trigger,
            .al-layout-theme-custom .${prefixCls}-menu,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub{
                background: ${left.backgroundColor};
                color: ${left.textColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-selected,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-open,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-item-selected {
                color: ${left.selectedColor};
                background-color: ${left.backgroundColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected .${prefixCls}-menu-item-icon + span,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected .${prefixCls}-menu-item-icon{
                color: ${left.selectedColor};
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-inline.${prefixCls}-menu-sub {
                box-shadow: none;
                background-color: ${left.backgroundColor};
            }
            .al-layout-theme-custom .${prefixCls}-layout-header{
                background: ${top.backgroundColor} !important;
                color: ${top.textColor} !important;
            }
            /**应用端顶部header-用户那块下拉样式**/
            .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item-active,
            .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item:hover {
                color: ${top.selectedColor};
                background-color: ${top.backgroundColor}
            }
            .${prefixCls}-menu-vertical.${prefixCls}-menu-sub,
            .${prefixCls}-menu-vertical-left.${prefixCls}-menu-sub,
            .${prefixCls}-menu-vertical-right.${prefixCls}-menu-sub{
                color: ${left.selectedColor};
                background-color: ${left.backgroundColor}
            }
            .${prefixCls}-menu-inline-collapsed-tooltip .${prefixCls}-tooltip-inner{
                color: ${left.selectedColor};
                background-color: ${left.backgroundColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::after,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub .${prefixCls}-menu-submenu-title .${prefixCls}-menu-submenu-arrow::before{
                background: ${left.textColor}
            }
        `
    }
    // 顶部导航自定义样式
    function handleSetHorizontalStyles(prefixCls) {
        const { topMenuArea: top } = LayoutConfig
        return `
            .al-layout-theme-custom .${prefixCls}-layout-sider,
            .al-layout-theme-custom .logo-wrapper,
            .al-layout-theme-custom .${prefixCls}-menu,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-sub{
                background: ${top.backgroundColor};
                color: ${top.textColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-active,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-selected,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-title:hover,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-submenu-open,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected,
            .al-layout-theme-custom .${prefixCls}-menu-submenu-popup.${prefixCls}-menu .${prefixCls}-menu-item-selected {
                color: ${top.selectedColor};
                background-color: ${top.backgroundColor}
            }
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected .${prefixCls}-menu-item-icon + span,
            .al-layout-theme-custom .${prefixCls}-menu .${prefixCls}-menu-item-selected .${prefixCls}-menu-item-icon{
                color: ${top.selectedColor};
            }
            .al-layout-theme-custom .${prefixCls}-layout-header{
                background: ${top.backgroundColor} !important;
                color: ${top.textColor} !important;
            }
            .${prefixCls}-menu-vertical.${prefixCls}-menu-sub,
            .${prefixCls}-menu-vertical-left.${prefixCls}-menu-sub,
            .${prefixCls}-menu-vertical-right.${prefixCls}-menu-sub{
                color: ${top.selectedColor};
                background-color: ${top.backgroundColor}
            }
            /**应用端顶部header-用户那块下拉样式**/
            .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item-active,
            .al-layout-custom-new .${prefixCls}-dropdown-placement-bottomRight .${prefixCls}-dropdown-menu-item:hover {
                color: ${top.selectedColor};
                background-color: ${top.backgroundColor}
            }
        `
    }
</script>
